<template>
  <div class="home">
    <el-tree ref="tree" :data="treeNode" node-key="id" show-checkbox :default-expanded-keys="defaultExpandedKeys"
      :props="defaultProps" @node-click="getCheckedKeysd">
    </el-tree>

    <div class="buttons">
      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
      <el-button @click="resetChecked">清空</el-button>
    </div>
    <HelloWorld :msg="msg" />
    <tree-select :options="treeNode" @getValue="getValue2" />
    <div class="map">
      <my-map @mapClick="handleMapClick"></my-map>
    </div>
    <div>
      <input type="text" id="iptId">
      <SearchMap iptId="iptId" @search="handleSearch" />
    </div>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import TreeSelect from '@/base-ui/tree-select/TreeSelect.vue'
import MyMap from "@/base-ui/map/myMap.vue"
import SearchMap from "@/base-ui/map/search-map.vue"

/**
 * 描述
 * @date 2022-10-23
 * @param {Array} testData 要构造的数组
 * @returns {Array} 构造好的属性结构数组
 */
function foo(testData) {
  // 构造父级格式
  let treeNode = []
  Object.keys(testData).forEach((item) => {
    treeNode.push({ label: item })
  })
  // 构造节点
  for (const key in testData) {
    if (Object.hasOwnProperty.call(testData, key)) {
      const element = testData[key]
      element.label = element.kpi_name
      // 记录当前节点位于testData 的位置
      let i = 0
      let item = treeNode.find((item, index) => {
        i = index
        return item.label === key
      })
      item.children = item.children || []
      let res = tools(element)
      for (const key in res) {
        const element = res[key]
        item.children.push(element)
      }
      if (!item.children.length) delete treeNode.splice(i, 1)

    }
  }
  // 递归遍历添加id属性
  treeNode = insertAttr(treeNode)
  console.log(treeNode);
  return treeNode
}
/**
 * 描述
 * @date 2022-10-23
 * @param {Array} 二级节点数组
 * @returns {Object} 返回构造好的二级和三级节点信息
 */
function tools(arr) {
  let obj = {}
  // 构造二级和三级节点
  arr.forEach((el) => {
    let temp = obj[el.category]
    el.label = el.kpi_name
    if (!temp) {
      obj[el.category] = { label: el.category, children: [] }
      temp = obj[el.category]
    }
    temp.children.push(el)
    if (!temp.children.length) delete item.children
  })

  return obj
}
/**
 * @desc 为树形结构添加一个属性
 * @param {Array} treeData 构造好的属性结构数组
 */
function insertAttr(treeData = []) {
  // 由于没有id 所以必须添加一个虚拟id
  let id = 1
  function foo(treeData) {
    let backups = JSON.parse(JSON.stringify(treeData))
    return backups.map((item) => {
      const hasChildren = item.children && item.children.length
      return {
        ...item,
        id: id++,
        children: hasChildren ? foo(item.children, id) : [],
      }
    })
  }
  return foo(treeData)

}
/**
 * @desc 通过 name找到 节点信息
 * @param {Array} arr
 * @param {Array} treeData
 */
function findNodeByName(arr, treeData) {
  let res = []
  function foo(arr = [], treeData = []) {
    treeData.forEach(item => {
      if (arr.includes(item.label)) {
        res.push(item)
      }
      const { children } = item
      if (children && children.length) {
        foo(arr, children)
      }

    })
  }
  foo(arr, treeData)
  // console.log(res);
  return res
}
/**
 * @desc  展开当前节点的所有父节点信息
 * @param {Node} node
 */
function setParentNodeExpended(node) {

  node.expanded = true
  if (node.parent) {
    setParentNodeExpended(node.parent)
  }

}

export default {
  name: "HomeView",
  components: { TreeSelect, HelloWorld, MyMap, SearchMap },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label"
      },
      testData: {
        首页: [
          {
            kpi_name: "首页-category2-1",
            content: "0001",
            category: "category2",
          },
          {
            kpi_name: "首页-category1-1",
            content: "0001",
            category: "category1",
          },
          {
            kpi_name: "首页-category1-2",
            content: "0001",
            category: "category1",
          },
          {
            kpi_name: "首页-category3-1",
            content: "0001",
            category: "category3",
          },
        ],
        系統管理: [
          {
            kpi_name: "系統管理-category2-1",
            content: "0001",
            category: "category2",
          },
          {
            kpi_name: "系統管理-category8-1",
            content: "0001",
            category: "category8",
          },
          {
            kpi_name: "系統管理-category1-1",
            content: "0001",
            category: "category1",
          },
          {
            kpi_name: "系統管理-category3-1",
            content: "0001",
            category: "category3",
          },
          {
            kpi_name: "系統管理-category3-1",
            content: "0001",
            category: "category3",
          },
          {
            kpi_name: "系統管理-category3-1",
            content: "0001",
            category: "category3",
          },
        ],
        项目配置: [
          {
            kpi_name: "项目配置-category2-1",
            content: "0001",
            category: "category2",
          },
          {
            kpi_name: "项目配置-category1-1",
            content: "0001",
            category: "category1",
          },
          {
            kpi_name: "项目配置-category1-2",
            content: "0001",
            category: "category1",
          },
          {
            kpi_name: "项目配置-category3-1",
            content: "0001",
            category: "category3",
          },
        ],
        其他: []
      },
      treeNode: [],
      // 默认展开节点数据
      defaultExpandedKeys: [],
      msg: "home",

    };
  },
  created() {
    this.getFoo();
  },
  mounted() {
    this.setCheckedNodesByName();
  },
  methods: {
    // 设置数据s
    getFoo() {
      this.treeNode = foo(this.testData);
      // console.log(this.testData);
    },
    getCheckedNodes(a, b, c) {

      console.log(this.$refs.tree.getCheckedNodes());


    },
    getCheckedKeysd(a, b, c) {
      console.log(a, b, c)
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([{
        id: 5,
        label: "二级 2-1"
      }, {
        id: 9,
        label: "三级 1-1-1"
      }]);
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    setCheckedNodesByName(arr = ["首页-category2-1", "系統管理-category1-1"]) {
      const selectedNodes = findNodeByName(arr, this.treeNode)
      this.$refs.tree.setCheckedNodes(selectedNodes);
      selectedNodes.forEach(item => {
        const node = this.$refs.tree.getNode(item.id);
        // 第一种方式 展开节点
        this.defaultExpandedKeys.push(item.id)

        // 第二种方式展开节点 递归调用 让每一父节点的 expended 为 true
        // setParentNodeExpended(node)
        // console.log(node);
      })
    },
    // filterNode(value, data) {
    //     if (!value) return true;
    //     return data.label.indexOf(value) !== -1;
    //   }
    getValue2(value, a, b) {
      console.log('getValue2', value, a, b);
    },
    handleMapClick(e) {
      console.log("经度", e.lng, "维度:", e.lat);
    },
    handleSearch(e) {
      console.log("经度", e.location.lng, "维度:", e.location.lat, "地点", e.address);
    }
  },

}
</script>
<style lang="less" scoped >
.map {
  margin: 0 auto;
  width: 500px;
  height: 500px;
}
</style>
